<template>
  <view class="content">
    <view class="navbarborder"></view>
    <view class="card">
      <view class="left">
        <view class="img">
          <image src="../../static/logo.png" mode=""></image>
        </view>
      </view>
      <view class="right">
        <view class="view">
          <view class="top">
            <view class="text">
              某某设计有限公司
            </view>
            <view class="icon">
              <image src="../../static/prebook/xiugai.png" mode=""></image>
            </view>
          </view>
          <view class="bottom">
            金牌团队
          </view>
        </view>
      </view>
    </view>
    <view class="menu">
      <view class="view">
        <view class="left">
          <view class="top">
            <image src="../../static/logo.png" mode=""></image>
          </view>
          <view class="text">
            团队设置
          </view>
        </view>
        <view class="right">
          <view class="top">
            <image src="../../static/logo.png" mode=""></image>
          </view>
          <view class="text">
            成员管理
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
 const dataList = ref([])
 const form = reactive({
   pageNo: 1,
   pageSize: 10,
   username: ''
 })
 const paging = ref(null)
 const queryList = (pageNo, pageSize) => {
   form.pageNo = pageNo
   // 此处请求仅为演示，请替换为自己项目中的请求
   // getUserList(form).then(res => {
   // if (res.code == 0) {
   dataList.value = dataList.value.concat([])
   // total.value = res.result.total
   paging.value.complete([]);
   // }
   // })
 }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .navbarborder{
      height: 0;
      border-top: 2rpx solid #EEEEEE;
    }
    .card{
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      .left{
        width: 200rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .img{
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
          border: 1rpx solid #EEEEEE;
          overflow: hidden;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
      .right{
        width: 550rpx;
        height: 200rpx;
        display: flex;
        align-items: center;
        .view{
          width: 100%;
          .top{
            display: flex;
            .text{
              font-size: 32rpx;
              font-weight: 700;
              height: 50rpx;
              line-height: 50rpx;
            }
            .icon{
              width: 50rpx;
              height: 50rpx;
              image{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
          .bottom{
            width: 150rpx;
            padding: 5rpx 15rpx;
            text-align: center;
            color: #fff;
            font-size: 16rpx;
            border-radius: 10rpx;
            background-color: red;
          }
        }
      }
    }
    .menu{
      width: 100%;
      height: 250rpx;
      margin-top: 20rpx;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .view{
        display: flex;
        .left{
          width: 375rpx;
          height: 200rpx;
          // border: 1rpx solid green;
          .top{
            width: 100rpx;
            height: 100rpx;
            margin: 0 auto;
            border-radius: 50%;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .text{
            text-align: center;
            font-size: 32rpx;
            height: 50rpx;
            line-height: 50rpx;
          }
        }
        .right{
          width: 375rpx;
          height: 200rpx;
          // border: 1rpx solid blue;
          .top{
            width: 100rpx;
            height: 100rpx;
            margin: 0 auto;
            border-radius: 50%;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .text{
            text-align: center;
            font-size: 32rpx;
            height: 50rpx;
            line-height: 50rpx;
          }
        }
      }
      
    }
  }
</style>